import React from "react";
import axios from 'axios'
export default class Camera extends React.Component{
    constructor(){
        super()
        this.state={
            cinemasList:[],
            keyValue:''
        }
        axios({
            url:"https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=7684965",
            method:'get',
            headers:{
                'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host':'mall.film-ticket.cinema.list'
            }
        }).then(res=>this.setState({
            cinemasList:res.data.data.cinemas,
        })).catch(err=>console.log(err))
    }
    render(){
        return (
            <div>
                <input value={this.state.keyValue} onInput={(e)=>{
                    this.setState({keyValue:e.target.value})
                }}/>
                {this.getCinemasList().map(item=>
                    <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>    
                )}
            </div>
        )
    }

    getCinemasList(){
        let keyValue=this.state.keyValue.toUpperCase()
        return this.state.cinemasList.filter(item=>{
            return item.name.toUpperCase().includes(keyValue)||item.address.toUpperCase().includes(keyValue)
        })
    }

}